<template>
  <div class="car-detail-container">
    <div class="car-image">
      <img :src="carImage" alt="车辆图片" @click="showLargeImage" />
      <el-button type="primary" class="view-large-btn" @click="showLargeImage">查看大图</el-button>
    </div>
    <h1>车辆详情页</h1>
    <p>车辆ID: {{ $route.params.id }}</p>
    <p>该页面将展示车辆的详细信息</p>
  </div>

  <!-- 大图预览对话框 -->
  <el-dialog
    v-model="dialogVisible"
    title="车辆图片"
    width="80%"
    :before-close="handleClose"
  >
    <div class="large-image-container">
      <img :src="carImage" alt="车辆大图" class="large-image" />
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import carImageUrl from '@/assets/images/car.jpg';

// Car detail page logic will be implemented here

// 图片相关
const carImage = ref(carImageUrl);
const dialogVisible = ref(false);

// 显示大图
const showLargeImage = () => {
  dialogVisible.value = true;
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style scoped>
.car-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.car-image {
  margin-bottom: 20px;
  text-align: center;
}

.car-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.car-image img:hover {
  transform: scale(1.02);
}

.view-large-btn {
  margin-top: 10px;
}

.large-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.large-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
</style> 